<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header active="admin" @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:30px;">
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="16">
          <el-empty description="请登录" :image-size="screenHeight" v-if="info ==null"></el-empty>
          <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName" v-else>
            <el-tab-pane label="资料" name="info">
              <el-row>
                <el-col>
                  <el-row type="flex" align="middle"
                          style="margin-top:10px;">
                    <el-col :span="2">
                      <!-- 进入用户主页 -->
                      <a href="#">
                        <el-avatar :src="info.headerUrl" alt="用户头像"
                                   style="width:50px;height:50px;" size="large"></el-avatar>
                      </a>
                    </el-col>
                    <el-col :span="22" style="text-align: left;">
                      <el-row>
                        <el-col :span="4">
                          <span style="float: left;font-size: 20px;color: orange">{{ info.username }} <el-tag
                              v-if="info.id===user.id" type="success"
                              size="mini">本人</el-tag></span>
                        </el-col>
                        <el-col :span="20" v-if="userId!=null&&user!=null&&userId!=user.id">
                          <el-button type="primary" size="small" style="float: right;margin-left: 5px;"
                                     @click="focus(info.id)">{{ focusButtonText() }}
                          </el-button>
                          <el-button type="success" size="small" style="float: right;" @click="showNewMessageDialog">
                            私信
                          </el-button>
                        </el-col>
                      </el-row>
                      <el-row style="margin-top:10px;">
                        <el-col :span="8">
                          <span style="float: left;">注册于 {{ info.createTime }}</span>
                        </el-col>
                        <el-col :span="16">
                          <span style="float: right;">
                            <a @click="getFollowerSet()" style="cursor: pointer"
                               v-if="info!=null&&info.followerCount>0&&user!=null&&info.id==user.id">关注了 <el-badge
                                :value="info.followerCount" :max="999"></el-badge> 人</a>
                            <a v-else>关注了 <el-badge
                                :value="info.followerCount" :max="999"></el-badge> 人</a>
                                                        |
                            <a @click="getFolloweeSet()" style="cursor: pointer"
                               v-if="info!=null&&info.followeeCount>0&&user!=null&&info.id==user.id">关注者 <el-badge
                                :value="info.followeeCount" :max="999"></el-badge>人</a>
                            <a v-else>关注者 <el-badge :value="info.followeeCount" :max="999"></el-badge>人</a>|
                            获得了 <el-badge :value="info.good" :max="999"></el-badge>个赞</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="帖子" name="postList">
              <el-empty description="帖子为空" :image-size="screenHeight" v-if="postList.length==0"></el-empty>
              <el-row v-for="post in postList" :key="post.id" v-else>
                <el-col>
                  <el-row type="flex" align="middle"
                          style="margin-top:10px;">
                    <el-col :span="2">
                      <!-- 进入用户主页 -->
                      <a>
                        <el-avatar :src="post.user.headerUrl" alt="用户头像"
                                   style="width:50px;height:50px;" size="large"></el-avatar>
                      </a>
                    </el-col>
                    <el-col :span="22" style="text-align: left;">
                      <b>
                        <a :href="'/postDetail?postId='+post.post.id">{{ post.post.title }}</a>
                        <el-tag effect="dark" type="success" size="mini" v-if="post.post.type==1">置顶</el-tag>
                        <el-tag effect="dark" type="danger" size="mini" v-if="post.post.status==1">精华</el-tag>
                      </b>
                      <div style="font-size: 10px;margin-top:10px;">
                        <span style="float: left;">{{ post.user.username }} 发布于 {{ post.post.createTime }}</span>
                        <span style="float: right;">
                        赞 <el-badge :value="post.post.good" :max="999" :title="post.post.good"></el-badge>|
                          回帖<el-badge :value="post.post.commentCount" :max="999"
                                      :title="post.post.commentCount"></el-badge>
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-pagination
          v-if="activeName==='postList'"
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--  底栏  -->
    <Footer/>

    <!--  弹出类对话框  -->
    <el-dialog
        title="发私信"
        :visible.sync="newMessageDialogShow"
        width="60%">
      <el-form label-width="50px">
        <el-form-item label="内容">
          <el-input v-model="content" type="textarea" :rows="10"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="newMessageDialogShow = false">取 消</el-button>
      <el-button type="primary" @click="submitMessage">确 定</el-button>
    </el-dialog>

    <el-dialog
        title="我关注的人"
        :visible.sync="followerDialogShow"
        width="50%">
      <el-form label-width="40px">
        <el-form-item>
          <el-tag
              v-for="item in followerSet"
              :key="item.id"
              @close="removeFocus(item.id)"
              closable>
            {{ item.username }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
        title="关注我的人"
        :visible.sync="followeeDialogShow"
        width="50%">
      <el-form label-width="40px">
        <el-form-item>
          <el-tag
              v-for="item in followeeSet"
              :key="item.id">
            {{ item.username }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "Profile",
  components: {Footer, Header},
  data() {
    return {
      activeName: 'info',
      screenHeight: screen.availHeight / 2,
      postList: [],
      followerSet: [],
      followeeSet: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderBy: '',
      newMessageDialogShow: false,
      followerDialogShow: false,
      followeeDialogShow: false,
      content: null,
      post_list_url: '/community/home/myPostList',
      message_add_url: '/community/message/reply',
      profile_url: '/community/admin/profile',
      focus_url: '/community/admin/profile/focus',
      focus_status_url: '/community/admin/profile/focusStatus',
      follower_url: '/community/admin/profile/followerSet',
      followee_url: '/community/admin/profile/followeeSet',
      info: null,
      userId: null,
      user: null,
      focusStatus: false,
    }
  },
  methods: {
    async removeFocus(id) {
      await this.focus(id);
      this.info.followerCount = this.info.followerCount - 1;
      this.getFollowerSet();
      return true;
    },
    getFollowerSet() {
      this.axios.get(this.follower_url + '/' + this.user.id).then((response) => {
        console.log(response);
        if (response.data.code === '00000') {
          this.followerSet = response.data.data.followerSet;
          if (this.followerSet.length > 0) {
            this.followerDialogShow = true;
          } else {
            this.followerDialogShow = false;
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    getFolloweeSet() {
      this.axios.get(this.followee_url + '/' + this.user.id).then((response) => {
        console.log(response);
        if (response.data.code === '00000') {
          this.followeeSet = response.data.data.followeeSet;
          this.followeeDialogShow = true;
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    focusButtonText() {
      if (this.focusStatus === 3) {
        return "互相关注";
      }
      if (this.focusStatus === 0) {
        return "关注TA";
      }
      return "已关注";
    },
    getFocusStatus() {
      if (!this.userId) {
        return;
      }
      this.axios.get(this.focus_status_url + '/' + this.userId).then((response) => {
        console.log(response);
        if (response.data.code === '00000') {
          this.focusStatus = response.data.data.focusStatus;
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    async focus(userId) {
      await this.axios.get(this.focus_url + '/' + userId).then((response) => {
        console.log(response);
        if (response.data.code === '00000') {
          this.getProfileInfo();
        } else {
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        this.$message.error('操作失败!');
        console.log(error);
      });
    },
    getProfileInfo() {
      // 获取其它用户信息
      if (!this.userId) {
        return;
      }
      this.axios.get(this.profile_url + '/' + this.userId).then((response) => {
        this.info = response.data.data.info;
        this.getFocusStatus();
      }).catch((error) => {
        console.log(error);
      });
    },
    getUser(info) {
      this.user = info;
      if (this.$route.query.userId) {
        this.userId = this.$route.query.userId;
        if (this.userId != info.id) {
          this.getProfileInfo();
        } else {
          this.info = info;
        }
      } else {
        console.log('getUser:', info);
        this.info = info;
      }
    },
    changeTab() {
      if (this.activeName === 'info') {
        console.log('info');
      } else {
        this.getPostList();
      }
    },
    getPostList() {
      this.axios.get(this.post_list_url,
          {
            params: {pageSize: this.pageSize, pageNum: this.pageNum, userId: this.info.id}
          }).then((response) => {
        console.log(response);
        this.postList = response.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPostList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getPostList();
    },
    showNewMessageDialog() {
      this.newMessageDialogShow = true;
    },
    submitMessage() {
      let message = {
        toId: this.userId,
        content: this.content
      };
      this.axios.post(this.message_add_url,
          message
      ).then((response) => {
        console.log(response);
        this.newMessageDialogShow = false;
        if (response.data.code === '00000') {
          this.$message.success('发送成功!');
        } else {
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        this.newMessageDialogShow = false;
        console.log(error);
        this.$message.error(error);
      });
      this.content = null;
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

>>> *.el-tag {
  margin-left: 5px;
}
</style>
